<template>
  <div class="song_detail_box">
    <div class="main">
      <div class="info">
        <div class="content">
          <img :src="songData.picUrl" />
        </div>
        <div class="text">
          <div class="item song_name">{{ songData.name }}</div>
          <div class="item auth_name">{{ songData.authName }}</div>
        </div>
      </div>
      <div class="player">
        <img src="../../assets/播放.svg" />
        <vue3-mini-audio
          :url="songData.songUrl"
          :coverAudioBg="`transparent`"
        />
        <!-- <video-play :src="`https://example.com/video.mp4`"></video-play> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "SongDetail",
});
</script>
<script lang="ts" setup>
// import aplayer from "vue-aplayer";
import Vue3MiniAudio from "vue3-mini-audio";

import "vue3-mini-audio/dist/style.css";
import { usePlayStore } from "@/store";
import { getSongDetailDataApi, getSongUrlApi } from "@/api/home.ts";
import { songType } from "./type.ts";

const playStore = usePlayStore();

// 歌曲信息
const songData = ref<songType>({
  id: 0,
  name: "",
  picUrl: "",
  songUrl:
    "http://m802.music.126.net/20231213154544/baa2f5b4b46c52fe98ac0a105670e813/jd-musicrep-ts/eec1/4df0/a328/c5bc475a1ab41143a11d057fabcf79e7.mp3",
  authName: "",
});

// 获取歌曲Url函数
const getSongUrlFunc = async (id: number, level: string) => {
  await getSongUrlApi({ id: id, level: level }).then((res) => {
    console.log(res);
    songData.value.songUrl = res.data[0].url;
  });
};

// 获取歌曲详情信息的函数
const getSongDetailDataFunc = async () => {
  await getSongDetailDataApi({ ids: playStore.songInfo.id }).then((res) => {
    console.log(res);
    songData.value.id = res.songs[0].id;
    songData.value.name = res.songs[0].name;
    songData.value.picUrl = res.songs[0].al.picUrl;
    songData.value.authName = res.songs[0].ar[0].name;
  });
};

onMounted(() => {
  getSongUrlFunc(playStore.songInfo.id, "lossless");
  getSongDetailDataFunc();
});

console.log(playStore.songInfo);
</script>

<style lang="scss" scoped>
.song_detail_box {
  width: 100vw;
  height: 100vh;
  // border: 1px solid red;
  background: url(../../assets/song_detail_bg.png);
  background-size: 100% 100%;
  position: relative;

  .main {
    width: 1000px;
    height: 600px;
    // border: 1px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(200, 200, 200, 0.4);
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    .info {
      // border: 1px solid red;
      height: 88%;
      // padding: 50px 50px;
      position: relative;

      .content {
        width: 340px;
        height: 380px;
        // background: yellowgreen;
        // border: 1px solid red;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        flex-direction: column;

        img {
          width: 100%;
          height: 80%;
        }
      }
      .text {
        position: absolute;
        bottom: -400px;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        // transform: translate(-50%);
        padding-top: 10px;
        height: 18%;
        text-align: center;
        display: flex;
        flex-direction: column;

        .item {
          line-height: 40px;
          height: 50%;
        }

        .song_name {
          font-size: 22px;
          // font-family: "黑体";
          font-weight: bold;
        }
        .auth_name {
          color: rgb(39, 38, 38);
          font-size: 14px;
        }
      }
    }
    .player {
      padding-top: 14px;
      border: 1px solid red;
      height: 12%;
      position: relative;

      img {
        position: absolute;
        top: 20px;
        left: 0;
        width: 20px;
        height: 20px;
        // z-index: 10000;
      }
    }
  }
}

::v-deep .audio-player {
  width: 100%;
  height: 40px !important;
}

::v-deep .audio-player .van-slider {
  width: 90%;
}

::v-deep .btn-pause {
  width: 20px;
}

::v-deep .btn-pause i {
  width: 20px;
}
::v-deep .btn-play {
  width: 20px;
}
::v-deep .btn-play i {
  width: 20px;
}

::v-deep .van-slider {
  height: 10px;
}

::v-deep .van-slider__button-wrapper {
  // width: 50px;
  // height: 50px;
}
::v-deep .progress-dot {
  // font-size: 50px;
  height: 10px;
  width: 10px;
}

::v-deep .duration-remain {
  font-size: 16px;
}
</style>
